<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    append-to-body
    top="30px"
    width="96%"
  >
    <div class="container">
      <div class="d-flex mb-3">
        <span class="font-weight-bold col-form-label">产业：</span>
        <el-select v-model="productIndex" @change="onProductChange" class="form-control-ml">
          <el-option
            v-for="(p, index) in dataProduct"
            :key="`p-${index}`"
            :value="index"
            :label="p.product_name"
          ></el-option>
        </el-select>
      </div>

      <div class="card mb-3">
        <div class="card-body">
          <h5>产业集中度</h5>
          <div class="mx-5 my-3">
            区域：
            <el-radio-group size="medium" v-model="AreType">
              <el-radio-button label="first">分区县</el-radio-button>
              <el-radio-button label="two">分乡镇</el-radio-button>
            </el-radio-group>
          </div>
          <div class="mx-5 my-3">
            <chart-market-area
              :address-code="infoAddressCodeCity"
              :unit="unit"
              v-if="AreType === 'first'"
              :category-code="productCode"
              title="分区县"
            ></chart-market-area>
          </div>

          <div class="mx-5 my-3">
            <chart-market-area
              :address-code="infoAddressCodeTown"
              :unit="unit"
              v-if="AreType === 'two'"
              :category-code="productCode"
              title="分乡镇"
            ></chart-market-area>
          </div>
        </div>
      </div>
      <div class="card mb-3">
        <div class="card-body">
          <h5>行业平均审批担保金额</h5>

          <div class="mx-5 my-3">
            <chart-market-fund
              :customer-related-id="customerRelatedId"
              :category-code="productCode"
            ></chart-market-fund>
          </div>
        </div>
      </div>

      <div class="card mb-3">
        <div class="card-body">
          <h5>市场行情</h5>

          <div class="mx-5 my-3">
            <div class="d-flex align-items-center mb-1">
              <span class="mr-3">产品：</span>
              <select-product-cate
                v-model="marketProductCode"
                class="form-control-ml"
              ></select-product-cate>
              <el-radio-group size="medium" v-model="marketProductDim">
                <el-radio-button label="year">近7年</el-radio-button>
                <el-radio-button label="month">近12月</el-radio-button>
                <el-radio-button label="quarter">近4季度</el-radio-button>
                <el-radio-button label="day">近30天</el-radio-button>
              </el-radio-group>
            </div>
            <chart-market-average
              :category-code="marketProductCode"
              :show-chart="marketProductDim"
            ></chart-market-average>
          </div>

          <div class="mx-5 my-3">
            <div class="d-flex align-items-center mb-1">
              <span class="mr-3">原材料：</span>
              <select-product-cate
                v-model="marketMaterialCode"
                class="form-control-ml"
              ></select-product-cate>
              <el-radio-group size="medium" v-model="marketMaterialDim">
                <el-radio-button label="year">近7年</el-radio-button>
                <el-radio-button label="month">近12月</el-radio-button>
                <el-radio-button label="quarter">近4季度</el-radio-button>
                <el-radio-button label="day">近30天</el-radio-button>
              </el-radio-group>
            </div>

            <chart-market-average
              :colors="['#d68262', '#fef']"
              :category-code="marketMaterialCode"
              :show-chart="marketMaterialDim"
            ></chart-market-average>
          </div>
        </div>
      </div>

      <!--<div class="card mb-3">-->
      <!--<div class="card-body">-->
      <!--<h5>行业地位</h5>-->

      <!--<div class="mx-5 my-3">-->
      <!--<chart-market-scale :farm-id="customerInfo.customer_id"-->
      <!--:category-code="productCode"></chart-market-scale>-->
      <!--</div>-->

      <!--</div>-->
      <!--</div>-->

      <div class="card mb-3">
        <div class="card-body">
          <h5>用电情况</h5>

          <div class="mx-5 my-3">
            <chart-power-use :customer-related-id="customerRelatedId"></chart-power-use>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import ChartMarketArea from '@/credit/components/chart/ChartMarketArea'
import ChartMarketAverage from '@/credit/views/city/analy/ChartMarketAverage'
import ChartMarketFund from '@/credit/components/chart/ChartMarketFund'
// import ChartMarketScale from '@/credit/components/chart/ChartMarketScale'
import ChartPowerUse from '@/credit/components/chart/ChartPowerUse'
import SelectProductCate from '@/components/select/SelectProductCate'
export default {
  components: {
    ChartMarketArea,
    ChartMarketAverage,
    ChartMarketFund,
    // ChartMarketScale,
    ChartPowerUse,
    SelectProductCate,
  },
  props: {
    visible: Boolean,
    customerRelatedId: String,
  },
  data() {
    return {
      productIndex: '',
      productCode: '',
      unit: '',
      chartType: '',
      loading: false,
      AreType: 'first',
      customerInfo: {},
      infoAddressCodeCity: '',
      infoAddressCodeTown: '',
      dataProduct: [],
      dataProductMain: {},
      // 选择的产品
      marketProductCode: '',
      marketMaterialCode: '',
      marketProductDim: 'year',
      marketMaterialDim: 'year',
    }
  },
  computed: {},
  watch: {
    customerRelatedId() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },

    async getData() {
      if (!this.customerRelatedId) {
        return false
      }

      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData('credit', 'customer_related_view', {
          'customer_related_id.eq': this.customerRelatedId,
        })
      )
      this.loading = false
      this.dataProduct = []
      this.unit = ''
      this.dataProductMain = {}
      this.productCode = ''
      this.marketProductCode = ''
      this.marketMaterialCode = ''
      this.productIndex = ''
      if (res && res.data && res.data.length) {
        this.customerInfo = res.data[0]
        this.getProduct()
        this.getAddressCode()
      }
    },

    async getProduct() {
      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(
          'credit',
          'datum_customer_industrial',
          {
            'customer_related_id.eq': this.customerRelatedId,
          },
          { scale: 'desc' }
        )
      )
      this.loading = false

      if (res && res.data) {
        this.dataProduct = res.data
        for (let i = 0; i < this.dataProduct.length; i++) {
          const p = this.dataProduct[i]
          // 主导（营）产品
          if (p.is_main_product === '1') {
            this.unit = p.uscale
            this.dataProductMain = p
            this.productCode = p.category_code
            this.marketProductCode = p.category_code
            this.marketMaterialCode = p.category_code
            this.productIndex = i
          }
        }
      } else {
        this.dataProduct = []
      }
    },

    getAddressCode() {
      let code = this.customerInfo.address_code
      code = Number.parseInt(code)
      code = isNaN(code) ? 0 : code
      if (!code) {
        return false
      }

      // 区县 5206 00 000 000
      const city = Math.floor(code / Math.pow(10, 8))
      if (city % 100 > 0) {
        this.infoAddressCodeCity = `${city}${Array(9).join('0')}`
        const town = Math.floor(code / Math.pow(10, 6))
        if (town % 100 > 0) {
          this.infoAddressCodeTown = `${town}${Array(7).join('0')}`
        }
      }
    },

    onProductChange(val) {
      this.productCode = this.dataProduct[val].category_code
      this.unit = this.dataProduct[val].uscale || ''
    },
  },
}
</script>
<style lang="scss" scoped></style>
